<template>
  <div class="container">
    <!-- 播放器 -->
    <div class="nav">
      <div class="left">
        <span class="option">实时监控</span>
      </div>
      <div class="right">
        <el-select v-model="tags" placeholder="选择设备">
          <el-option v-for="(item, idx) in rtsps" :key="idx" :label="item.name" :value="item.name"
            @click="selectSource(idx)">{{ item.name }}</el-option>
        </el-select>
      </div>
    </div>
    <div class="video">
      <component :is="getComponentType(dataFlow)" :key="item" :url="dataFlow" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, reactive, watch } from 'vue';
import { reqOperationDevice } from '@/api/device'
import Rtsp from '@/components/Rtsp/index.vue'
import HLS from '@/components/HLS/index.vue'
import { ElMessage } from 'element-plus';
import useOperationStore from '../../store/operation';
// 存放地址流
let rtsps = reactive([])
// 当前播放顺序
let id = ref(0);
let tags = ref(null)
// 当前流地址
let dataFlow = ref("");

// 组件选择器
const getComponentType=(url)=>{
  if(url.startsWith("rtsp")){
    return Rtsp
  }
  if(url.endsWith(".m3u8")){
    return HLS
  }
  else return HLS
}

// 切换业务的数据对接处理
let operationStore=useOperationStore()
let operationId = ref(operationStore.data.length>0?operationStore.data[operationStore.index].id:'')
operationStore.$subscribe(async(mutation, state)=>{
  operationId.value=operationStore.data[operationStore.index].id
  await loadData()
})

// 换源
const selectSource=(idx)=>{
  id.value=idx;
  tags.value=rtsps[idx].name
  dataFlow.value=rtsps[idx].dataFlow
}

// 加载数据
const loadData=async ()=> {
  if (operationId.value == null) return
  else {
    let res = await reqOperationDevice(operationId.value)
    switch (res.code) {
      case 0:
        rtsps.splice(0,rtsps.length)
        rtsps.push(...res.data)
        if(res.data.length>0){
          id.value=0
          tags.value=rtsps[0].name
          dataFlow.value=rtsps[0].dataFlow
        }
        break;
      case 1:
        setTimeout(() => { $router.push('/login') }, 1000)
        break;
      case 2:
        setTimeout(() => {
          ElMessage({
            message: "请稍后刷新重试",
            type: 'info'
          })
        }, 1000)
        break
    }
  }
}


onMounted(async() => {
  await loadData()
});

onBeforeUnmount(() => {

});
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid rgb(212, 207, 207);
  padding: 1%;

  .nav {
    width: 96%;
    background-color: white;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;

      .option {
        border-left: 3px solid rgb(9, 184, 199);
        padding: 5px 10px;
        display: flex;
        align-items: center;
      }
    }

    .right {
      min-width: 15%
    }
  }

  .video {
    width: 96%;
    height: 85%;
    background-color: black;

    .demo-video {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border: none;
    }
  }
}
</style>
